<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/common/bootstrap.min.css">
    <script src="/common/jquery.min.js"></script>
    <script src="/common/popper.min.js"></script>
    <script src="/common/bootstrap.min.js"></script>
    <script type="text/javascript" src="/common/common.js"></script>


    <script>

        function clickDetail(evt) {
            // if (confirm("确定查看表" + evt.currentTarget.myParam + "详情吗？")) {
            window.open(
                getRealPath() + "/toTableIndex?tableName=" + evt.currentTarget.myParam + "&schema=" + $("#schema").val());
            // }
        }

        function genBean(evt) {
            $.ajax({
               url: getRealPath() + "/db/genBean",
               type: "get",
               data: {
                   "tableName" :evt.currentTarget.myParam,
                   "schema" :$("#schema").val()
               },
               dataType: "json",
               success: function (result) {
                   var json = eval(result);

                   document.getElementById("beanCode").innerHTML = json.data;
               }
           });

        }

        function genJDBCTemplate(evt) {
            $.ajax({
                       url: getRealPath() + "/db/genJDBCTemplate",
                       type: "get",
                       data: {
                           "tableName" :evt.currentTarget.myParam,
                           "schema" :$("#schema").val()
                       },
                       dataType: "json",
                       success: function (result) {
                           var json = eval(result);

                           document.getElementById("jdbcTemplate").innerHTML = json.data;
                       }
                   });

        }

        function CreateTableFromJSON(json) {

            // EXTRACT VALUE FOR HTML HEADER.
            // ('Book ID', 'Book Name', 'Category' and 'Price')
            var col = [];
            for (var i = 0; i < json.length; i++) {
                for (var key in json[i]) {
                    if (col.indexOf(key) === -1) {
                        col.push(key);
                    }
                }
            }

            // CREATE DYNAMIC TABLE.
            var table = document.createElement("table");
            table.className = "table";

            // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

            var tr = table.insertRow(-1);                   // TABLE ROW.

            for (var i = 0; i < col.length; i++) {
                var th = document.createElement("th"); // TABLE HEADER.
                th.innerHTML = col[i];
                tr.appendChild(th);
            }

            var th = document.createElement("th"); // TABLE HEADER.
            th.colSpan = 3;
            th.innerHTML = '操作';
            tr.appendChild(th);

            // ADD JSON DATA TO THE TABLE AS ROWS.
            for (var i = 0; i < json.length; i++) {

                tr = table.insertRow(-1);

                for (var j = 0; j < col.length; j++) {
                    var tabCell = tr.insertCell(-1);
                    var tName = json[i][col[j]];

                    tabCell.innerHTML = markRed(tName, $("#tableName").val());

                    if (j == col.length - 1) {
                        // ===========自定增加按钮
                        var tabCell = tr.insertCell(-1);
                        tabCell.innerHTML =
                            "<button type=\"button\" class=\"btn btn-outline-primary\">详情</button>";
                        // 增加事件
                        tabCell.addEventListener('click', clickDetail, false);
                        tabCell.myParam = tName;

                        var tabCell = tr.insertCell(-1);
                        tabCell.innerHTML =
                            "<button type=\"button\" class=\"btn btn-success\" data-toggle=\"modal\" data-target=\"#myModal\" >生成BEAN</button>";
                        tabCell.addEventListener('click', genBean, false);
                        tabCell.myParam = tName;

                        var tabCell = tr.insertCell(-1);
                        tabCell.innerHTML =
                            "<button type=\"button\" class=\"btn btn-success\" data-toggle=\"modal\" data-target=\"#myModal_1\" >生成JDBC模板</button>";
                        tabCell.addEventListener('click', genJDBCTemplate, false);
                        tabCell.myParam = tName;
                    }
                }
            }

            // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
            var divContainer = document.getElementById("dbResultList");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);
        }

        function genDBResultList(){
            console.log(getRealPath());

            $.ajax({
               url: getRealPath() + "/db/query",
               type: "get",
               data: {
                   "schema" : $("#schema").val(),
                   "tableName" :$("#tableName").val(),
                   "tableComment" :$("#tableComment").val()
               },
               dataType: "json",
               success: function (result) {
                   var json = eval(result);
                   // for(str in json){
                   //     console.log('str = ' + json[str].tableName +', value = ' + json[str].tableComment)
                   //     $("#dbResultList").html('str = ' + json[str].tableName +', value = ' + json[str].tableComment);
                   // }
                   CreateTableFromJSON(json)

                   console.log(result);
               }
            });
        }

    </script>
</head>
<body>

<div class="container">
    <form class="form-inline" action="/db/query">
        <label for="text" class="mb-2 mr-sm-2" >库名:</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="schema" placeholder="库名" name="schema"
               value = "dx20_test"
               onblur="genDBResultList()">

        <label for="text" class="mb-2 mr-sm-2">表名:</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="tableName" placeholder="表名" name="tableName"
               onblur="genDBResultList()">


        <label for="text" class="mb-2 mr-sm-2">表备注:</label>
        <input type="text" class="form-control mb-2 mr-sm-2" id="tableComment" placeholder="表备注" name="tableComment"
               onblur="genDBResultList()">
    </form>

    <div id="dbResultList"></div>

    <!-- The Modal -->
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">generator bean code</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div id="beanCode"></div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>

    <!-- The Modal -->
    <div class="modal fade" id="myModal_1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">generator jdbc template</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <div id="jdbcTemplate"></div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
</html>